<template>
  <div>
    <div class="content-container">
      <div class="itemContainer">
        <div class="">
          <span class="optimizationNameTitle">营销计划</span>
          <p class="optimizationName"><span class="NumberColor">10</span>个品类，<span>100</span>个产品型号的<span>900</span>个SKU在<span>3</span>个地区的<span>120</span>城市<span>5000</span>个终端销售</p>
         </div>
      </div>
    </div>
    <div style="padding:10px 0">
      2018年计划
      <div class="pickerOption">
        <el-button  style="margin: 0 10px" size="small" type="primary" >新建销售计划</el-button>
      </div>
    </div>
    <div style="clear:both;margin:10px 0">
      <el-card>
         <p>月计划</p>
         <el-select size="small"
            placeholder="选择类别" value='类算是1' style="width: 156px;">
            <el-option key="1" label="类1" value="类1">
            </el-option>
         </el-select>
         当前计划:计划哈哈哈哈哈哈哈哈哈
         <div class="pickerOption">
            当前时间2018-09-05 18:19:22&nbsp;&nbsp;&nbsp;
            <el-button  style="margin: 0 10px" size="small" type="primary" >新建销售计划</el-button>
         </div>
         <el-row  :gutter="20" style="margin:20px 0">
           <el-col :span="15">
             <el-row  :gutter="20" style="margin:20px 0">
               <el-col :span="8">
                 el-progress type="circle" :percentage="10"></el-progress>
               </el-col>
               <el-col :span="8">
                 <el-progress type="circle" :percentage="10"></el-progress>
               </el-col>
               <el-col :span="8">
                 <el-progress type="circle" :percentage="10"></el-progress>
               </el-col>
             </el-row>
           </el-col>
           <el-col :span="9">
             <el-row  :gutter="20" style="margin:20px 0">
               <el-col :span="12">
                 <el-progress type="circle" :percentage="10"></el-progress>
               </el-col>
               <el-col :span="12">
                 <el-progress type="circle" :percentage="10"></el-progress>
               </el-col>
             </el-row>
           </el-col>
        </el-row>
         <el-button-group>
           <el-button size="small" autofocus type="secondary" >销额</el-button>
           <el-button size="small" type="secondary">销量</el-button>
         </el-button-group>
          <div id="saleSummaryChart" style="height: 300px;width:100%;"></div>
         <el-table :data="tableData" style="width: 100%;margin-top:20px">
           <el-table-column
                prop="date"
                label="排名"
                width="80">
            </el-table-column>
           <el-table-column
                prop="name"
                label="产品型号"
                width="180">
            </el-table-column>
           <el-table-column
                prop="address"
                label="所属品类">
            </el-table-column>
           <el-table-column
                prop="date"
                label="产品组合"
                width="180">
            </el-table-column>
           <el-table-column
                prop="name"
                sortable
                label="指标量"
                width="180">
            </el-table-column>
           <el-table-column
                prop="address"
                sortable
                label="完成销售量">
            </el-table-column>
           <el-table-column
                prop="date"
                label="指标完成率"
                sortable
                width="180">
            </el-table-column>
           <el-table-column
                prop="name"
                label="操作"
                width="180">
                <template slot-scope="scope">
                    <el-button type="text" @click="showdeltail = true;fetchData(scope.row.salesAnalysisProduct.productCode,'S')">详情</el-button>
                </template>
            </el-table-column>
         </el-table>
       </el-card>
    </div>
  </div>
</template>

<script>
 import * as opreate from 'api/getData'
 export default {
   name: "optimizationIndex",
   data() {
      return {
        showUpProduct: false,
        activeName: 'second',
        chooseMonths: false,
        showEditProduct: false,
        saleDataTotal: false,
        tableData: []
      }
    },
   mounted() {
      this.getSaleSummary(1)
      opreate.getCategoryName().then(res => {
        this.catagoryData = res.data
      })
    },
   methods: {
     yearPlan () {
       this.$router.push({path: '/full/marketSale/newProductDetails'});
     },
     ckicka () {
       this.getSaleSummary(1)
       opreate.getCategoryName().then(res => {
         this.catagoryData = res.data
       })
     },
     UpProduct () {
       this.showUpProduct = !this.showUpProduct
     },
     editProduct (){
       this.showEditProduct = !this.showEditProduct
     },
     showProductInfo () {
       this.saleDataTotal = !this.saleDataTotal
     },
     chooseMonth () {
       this.chooseMonths = true
     },
     chooseYear () {
       this.chooseMonths = false
     },
     getSaleSummary(num) {
       opreate.salesTrend(num).then((res) => {
         this.saleSummary = res.data
         let myChart = this.$echarts.init(document.getElementById('saleSummaryChart'));

         let option = {
           legend: {
             data:['销售量','销售额'],
             right:'20'
           },
           xAxis: {
             data: this.saleSummary.map(item => item.dateTime)
           },
           tooltip:{
             show:true,
             trigger: 'axis'
           },
           yAxis: [{
             name: '销售量（万件）',
             type: 'value'
           }, {
             name: '销售额（万元）',
             type: 'value'
           }],
           series: [{
             name: '销售量',
             type: 'line',
             yAxisIndex: 0,
             smooth:true,
             itemStyle: {
               color: '#B0ACEC'
             },
             data: this.saleSummary.map(item => item.salesCount/10000)
           }, {
             name: '销售额',
             type: 'line',
             smooth:true,
             itemStyle: {
               color: '#9DD6F9'
             },
             yAxisIndex: 1,
             data: this.saleSummary.map(item => item.salesAmount/10000)
           }]
         };
         myChart.setOption(option); // 使用刚指定的配置项和数据显示图表
       })
     }
   }
 }
</script>

<style scoped>
  .card_bg{
    padding: 10px 20px;
    border-bottom: 1px solid #ebeef5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: #f5f7fa;
  }
  .Done {
    float: right;
    padding: 3px 0px;
    width: 80px;
    height: 81px;
    background: #0099CC;
    line-height: 80px;
    border-radius: 50%;
    text-align: center;
    position: absolute;
    right: -14px;
    top: -14px;
    color: #fff
  }
  .CardText {
    text-align: center;
    border-top: 1px solid #e2e2e2;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 100%;
  }
  .optimizationName span{
    color: #fec63c;
    font-weight: 500
  }
  .optimizationName {
    width: 100%;
    height: 45px;
    line-height: 55px;
    display: block;
    padding-left: 15px;
    background-color: #E8EEF4;
  }
  .optimizationNameTitle {
    width: 100%;
    height: 35px;
    line-height: 35px;
    display: block;
    padding-left: 15px;
    background-color: #fff;
    font-weight: bold;
  }
  .optimizationIndex-container{
    background: #E8EEF4
  }
  .summaryHeader {
    padding: 10px 12px;
  }
  .whiteContainer {
    padding: 0 12px;
  }
  .contentHeader{
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
  }
  .pickerOption {
    display: flex;
    align-items: center;
    float: right;
  }
</style>

